<template>
	<view>
		<view class="top">
			<image src="https://admin.cqycgyl.com/uploads/20250916/d41ee6d6d40db6d3955f9c709c5a3b58.png" mode="" class="icon"></image>
			<view class="address">
				{{addData.address_door?addData.address_name + addData.address_door:'请添加收货地址'}}
			</view>
			<view class="namebox">
				<view class="name">{{ addData.address_contacts? addData.address_contacts:''}}</view>
				<view class="phone">{{ addData.address_mobile?addData.address_mobile:''  }}</view>
			</view>
			<view class="top-btn" @click="changeaddress">
				{{addData.address_contacts ? '修改':'添加'}}
			</view>
		</view>
		<view class="main1">
			<view style="width: 100%;height: 30rpx;"></view>
			<view class="main-store">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Frame%402x.png" mode="" style="width: 26rpx;height: 26rpx;"></image>
				<view class="store-name">
					{{data.shop_id?data.shop_id:'云仓优送'}}
				</view>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/right.png" mode="" style="width: 9rpx;height: 17rpx;margin-left: 10rpx;"></image>
			</view>
			<view class="store-main">
				<image :src="data.image" mode="" style="width: 144rpx;height: 144rpx;"></image>
				<view class="store-right">
					<view class="right-top">
						{{data.title}}
					</view>
					<view class="right-center" v-if="data.sku && data.sku.length > 0">
						 {{ getDifferenceById }}
					</view>
					<view class="right-money">
						<text style="font-size: 28rpx;">券</text>{{price}}
					</view>
					<view class="right-num">
						<u-number-box v-model="number" :min="1"  @change="valChange"></u-number-box>
					</view>
				</view>
			</view>
			<view class="main-bot">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/car%402x.png" mode="" class="car"></image>
				<view class="bot-title">
					配送信息
				</view>
				<view class="bot-time">
					付款后48小时内发货
				</view>
			</view>
		</view>
		
		<view class="moneyInfo">
			<view class="InfoTitle">
				<view class="Infoname">
					商品金额
				</view>
				<view class="InfoMoney">
					<text style="font-size: 28rpx;">券</text>{{price}}
				</view>
			</view>
			
			<view class="InfoTitle" style="margin-top: 20rpx;">
				<view class="Infoname">
					运费<text style="font-size: 24rpx;color: #999999;">运费(快递)</text>
				</view>
				<view class="InfoMoney">
					<text style="font-size: 24rpx;">￥</text>0
				</view>
			</view>
			
			
			<view class="InfoTitle" style="margin-top: 20rpx;" @click="show = true">
				<view class="Infoname">
					<image 
					src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group1999%402x.png" 
					mode="" 
					style="width: 30rpx;height: 24rpx;margin-right: 5rpx;"></image>
					优惠权益
				</view>
				<view class="InfoMoney">
					<text style="font-size: 28rpx;color: #FD5F48;" >什么是购物券和支付金?</text>
					<image 
					src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Vector%20477%402x.png" 
					mode=""
					style="width: 12rpx;height: 19rpx;margin-left: 10rpx;"></image>
				</view>
			</view>
		
		</view>
		
		<view class="Pay">
			<view style="width: 100%;height: 1rpx;"></view>
		
		
			<view class="wxpay" style="margin-top: 20rpx;" @click="show1 = true">
				<view class="Infoname1">
					<image 
					src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/wx%402x.png" 
					mode="" 
					style="width: 46rpx;height: 46rpx;margin-right: 5rpx;"></image>
					<view class="Infonamesp">
						购物券
					</view>
				</view>
				<view class="InfoMoney">
					<text style="font-size: 28rpx;color: #999999;" v-if="Quanflag">当前购物券抵消金额:￥{{totalPrice}}</text>
					<text style="font-size: 28rpx;color: #999999;" v-else>当前有{{Quan}}张购物券可用</text>
					<image
					src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Vector%20477%402x.png" 
					mode=""
					style="width: 12rpx;height: 19rpx;margin-left: 10rpx;"></image>
				</view>
			</view>
		
			<view class="wxpay" @click="change(2)">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/wx%402x.png" mode="" class="wxpay1"></image>
				<view class="pay-title">
					微信支付
				</view>
				<text style="font-size: 28rpx;color: #999999;" class="pay-shuo">微信支付仅用于补足差额</text>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/no%402x.png" mode="" class="wxpay2" v-if="manner != 2"></image>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/yes%402x.png" mode="" class="wxpay2" v-else></image>
			</view>
		
		</view>
		
		<view class="footer">
			<view class="bottom-center">
				<view class="bottom-left" >
					订单备注
				</view>
				<view class="bottom-right" style="display: flex; flex-direction: column">
				
					<input type="text"  placeholder="下单后与商家协商" class="bottom-right" v-model="remarks"/>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 116rpx;"></view>
		<view class="Btn">
			<view class="Btntitle">
				总计:
			</view>
			<view class="Btntitle1">
				<text style="font-size: 24rpx;">￥</text>{{finalAmount}}
			</view>
			<view class="Btntitle2 " @click="submitOrder">
				提交订单
			</view>
		</view>
		
		<u-popup v-model="show1" mode="bottom" height='700rpx' border-radius="29">
			<view class="Quanpp">
				<view style="width: 100%;height: 1rpx;"></view>
				<view class="Quantitle">
					选择购物券
				</view>
				<view class="Quantitle1">
					您已选中购物券{{QuanNum.length}}个，购物券金额:<text style="color: #E15345;">￥{{totalPrice}}</text>
				</view>
				<view class="Quantitle1" style="margin-top: 20rpx;color: red;font-size: 20rpx;">
					注:未使用完的购物券可继续使用
				</view>
				<view v-for="(item,index) in QuanData" :key="index" class="main" @click="PayQuan(index,item)">
					<view class="qiu1"></view>
					<view class="qiu2"></view>
					<view class="main-left">
						<text class="tx" :style="{'fontSize':item.money.toString().length>=5?'50rpx':'72rpx'}">{{item.money}}</text>
						<text class="tx1">购物券(元)</text>
					</view>
					<view class="main-title">
						驿站购物券
					</view>
					<view class="main-time">
						有效期至:{{item.end_time}}
					</view>
					<view class="main-bottom">
						使用规则
					</view>
					<view class="main-img">
						<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Group%202186.png" mode=""
							style="width: 100%;height: 100%;"></image>
					</view>
					<view class="main-btn" >
						<image 
						src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/no%402x.png" 
						mode="" 
						class="wxpay2" 
						v-if="QuanNum.findIndex(val => val.id === item.id) === -1"></image>
						<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/yes%402x.png" mode="" class="wxpay2" v-else></image>
					</view>
				</view>
				<!-- <view style="width: 694rpx;height: 194rpx;"></view> -->
				<view class="GoPayQuanadd"></view>
				<view class="GoPayQuan">
					<view class="GoPayQuan1" @click="Use">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="show" mode="bottom" height='700rpx' border-radius="29">
			<view class="botmodal">
				<view style="width: 100%;height: 1rpx;"></view>
				<view class="modaltitle">
					什么是<text style="color: #F71828;">购物券</text>和<text style="color: #F71828;">支付金</text>
				</view>
				<view class="boxmoadl">
					<view style="width: 100%;height: 1rpx;"></view>
					<view class="boxtitle">
						购物券的产生:
					</view>
					<view class="boxconter">
						在云仓优送联盟的实体商家处消费即产生购物券，按照商家让利比X2.5=券额
					</view>
				</view>
				
				<view class="boxmoadl">
					<view style="width: 100%;height: 1rpx;"></view>
					<view class="boxtitle">
						支付金的产生:
					</view>
					<view class="boxconter">
						在云仓优送线上商城购物即产生支付金，按照50%赠送支付金
					</view>
				</view>
				
				<view class="boxmoadl">
					<view style="width: 100%;height: 1rpx;"></view>
					<view class="boxtitle">
						退货与支付金:
					</view>
					<view class="boxconter">
						退货将扣除与赠送支付金等额的退款，完全由购物券兑换的商品不支持退货
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:1,
				manner:2,
				show: false,
				price:'',
				remarks:'',
				data:'',
				Quan:'',
				QuanData:[],
				show1:false,
				QuanNum:[],
				Quanflag:false,
				addData:'',
				sku_id:'',
				fontSize:''
			}
		},
		computed: {
		    totalPrice() {
		      // 使用reduce方法累加数组中每个对象的price属性值
				let sum = this.QuanNum.reduce((accumulator, currentItem) => accumulator + (currentItem.money-0), 0);
				sum = parseFloat(sum.toFixed(2));
			    return sum
		    },
			finalAmount() {
				if (!this.data || !Array.isArray(this.data.sku)) {
				     return ''; // 返回一个默认值或提示信息
				   }
			     // 商品原价为数量乘以单价
				 const skuItem = this.data.sku.find(item => item.id == this.sku_id);
				 const skuPrice =  skuItem.price ? skuItem.price : '';
			    const originalAmount = this.number * (skuPrice-0);
			    // 实际支付金额为商品原价减去优惠总金额
				const preciseFinalAmount = parseFloat((originalAmount - this.totalPrice).toFixed(2));
				if(preciseFinalAmount <=0){
					return 0
				}else{
					return preciseFinalAmount;
				}
			},
			getDifferenceById() {
				 if (!this.data || !Array.isArray(this.data.sku)) {
				      return '';
				    }
			    const skuItem = this.data.sku.find(item => item.id == this.sku_id);
			    return skuItem && skuItem.difference ? skuItem.difference[0] : '';
			}
		},
		onShow() {
			let arr = this.vuex_chooseAddress?this.vuex_chooseAddress:''
			this.addData = arr
		},
		onLoad(option) {
			this.show1 = true
			let obj = {
				id:option.id
			}
			let select1 = false
			let select2 = false
			this.sku_id = option.skuid
			this.$u.api.shop.getGoodsInfo(obj).then(res =>{
				if(res.code == 200){
					this.data = res.data
					const skuItem = this.data.sku.find(item => item.id == this.sku_id);
					const skuPrice =  skuItem.price ? skuItem.price : '';
					this.price = skuPrice
					this.$u.api.index.getQuan({type:0,state:1}).then(item => {
						this.$nextTick(() =>{
							this.QuanData = item.data
							this.Quan = item.data.length
						})
						
						this.selectCoupons(item.data)
					}).catch(req =>{
						this.$nextTick(()=>{
							this.Quan = 0
						})
					})
				}
			})
		    
			// 获取收货地址
			this.$u.api.address.getAddressList().then(res =>{
				this.list = res?.data || []
				if(this.list.length > 0){
					let defaultAddress =  this.list.find(item => item.address_default == 1)
					this.addData = defaultAddress
				}
			})
		},
		methods:{
			selectCoupons(coupons) {
			    let remainingPrice = parseFloat(this.price); 
			    coupons.sort((a, b) => new Date(a.end_time.replace(/-/g,'/')) - new Date(b.end_time.replace(/-/g,'/'))); 
			    for (let coupon of coupons) {
			        if (remainingPrice <= 0) break; 
			        if (new Date(coupon.end_time.replace(/-/g,'/')) > new Date() && coupon.money_all != '0.00') {
						
			            let usableAmount = parseFloat(coupon.money); 
			                this.QuanNum.push(coupon); 
			                remainingPrice -= usableAmount; 
							
			            
			        }
			    }
				
			},
			submitOrder(){
				let coupon_ids = this.QuanNum.map(item => item.id)
				if(!this.addData.address_id){
					this.$u.toast('请添加收货地址')
					return
				}
				let obj = {
					address_id:this.addData?this.addData.address_id:'',
					lists:JSON.stringify([{goods_id: this.data.id, sku_id: this.sku_id, number: this.number}]), // 序列化lists数组
					remarks:this.remarks,
					coupon_ids
				}
				this.$u.api.shop.addOrder(obj).then(res =>{
					if(res.code == 1){
						uni.redirectTo({
							url:`../../pageA/shop/shopPay?order_id=${res.data}`
						})
					}else{
						uni.showToast({
						    title: res.msg,
						    icon: 'none'
						})
					}
				})
			},
			Use(){
				this.Quanflag = true
				this.show1 = false
			},
			PayQuan(index,val){
				    const index1 = this.QuanNum.findIndex(item => item.id === val.id);
				    
				    if (index1 !== -1) {
				      this.QuanNum.splice(index1, 1);
				    } else {
				      this.QuanNum.push(val);
				    }
			},
			changeaddress(){
				uni.navigateTo({
					url:`../../pageA/address/index?she=${true}`
				})
			},
			valChange(e) {
			},
			change(index){
				this.manner = index
			}
		}
	}
</script>

<style>
	.top{
		width: 692rpx;
		height: 172rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/Group%203388%402x.png') center/cover;
		position: relative;
	}
	.address{
		width: 450rpx;
		height: 72rpx;
		position: absolute;
		top: 28rpx;
		left: 66rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold;
		color: black;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
		/* border: 1px red solid; */
		/* font-weight: bold; */
	}
	.icon{
		position: absolute;
		top: 33rpx;
		left: 26rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.namebox{
		width: 500rpx;
		height: 24rpx;
		position: absolute;
		display: flex;
		left: 66rpx;
		bottom: 30rpx;
	}
	.name{
		height: 24rpx;
		/* background-color: yellow; */
		line-height: 24rpx;
		font-size: 28rpx;
		color: #444444;
		font-family: PingFang SC-Medium;
	}
	.phone{
		height: 24rpx;
		/* background-color: yellow; */
		line-height: 24rpx;
		font-size: 28rpx;
		color: #444444;
		font-family: D-DIN Exp-Regular;
		margin-left: 10rpx;
	}
	.top-btn{
		width: 108rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 2rpx #CDCDCD solid;
		text-align: center;
		line-height: 60rpx;
		position: absolute;
		top: 28rpx;
		right: 30rpx;
		font-size: 24rpx;
		color: #2D2D2D;
		font-family: PingFang SC-Medium;
		font-weight: Medium;
	}
	.main1{
		width: 690rpx;
		height: 376rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	.main-store{
		width: 662rpx;
		height: 26rpx;
		margin-left: 28rpx;
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
	}
	.store-name{
		min-width: 140rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
		line-height: 24rpx;
	}
	.store-main{
		width: 630rpx;
		height: 144rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
		margin-top: 58rpx;
	}
	.store-right{
		width: 474rpx;
		height: 144rpx;
		position: relative;
		/* background-color: skyblue; */
	}
	.right-top{
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: black;
		overflow:hidden;
		 white-space: nowrap;
		 text-overflow: ellipsis;
		 -o-text-overflow:ellipsis;
	}
	.right-center{
		width: 100%;
		height: 20rpx;
		line-height: 24rpx;
		font-size: 24rpx;
		color: #888888;
		margin-top: 20rpx;
	}
	.right-money{
		min-width: 130rpx;
		height: 28rpx;
		font-size: 36rpx;
		color: #192524;
		position: absolute;
		bottom: 5rpx;
		line-height: 28rpx;
	}
	.right-num{
		width: 170rpx;
		height: 44rpx;
		position: absolute;
		bottom: 0rpx;
		right: 30rpx;
	}
	.main-bot{
		width: 630rpx;
		height: 64rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		background-color: #FAFAFA;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
	}
	.car{
		width: 26rpx;
		height: 26rpx;
		margin-left: 14rpx;
	}
	.bot-time{
		width: 222rpx;
		height: 22rpx;
		line-height: 22rpx;
		font-size: 24rpx;
		color: #909090;
		margin-right: 30rpx;
	}
	.bot-title{
		width: 330rpx;
		height: 20rpx;
		line-height: 20rpx;
		font-size: 22rpx;
		color: #303030;
		margin-left: 8rpx;
	}
	.moneyInfo{
		width: 690rpx;
		height: 270rpx;
		margin-left: 30rpx;
		border-radius: 16rpx;
		margin-top: 20rpx;
		background-color: white;
		padding: 30rpx;
	}
	.InfoTitle{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.Infoname{
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
	}
	.Infoname1{
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	.InfoMoney{
		font-size: 32rpx;
		color: #192524;
	}
	.span{
		width: 630rpx;
		height: 128rpx;
		background-color: #F6F6F6;
		border-radius: 16rpx;
		margin-top: 30rpx;
	}
	.span1{
		width: 570rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #222222;
		margin-top: 24rpx;
	}
	.Pay{
		width: 690rpx;
		height: 170rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		background-color: white;
	}
	.wxpay{
		width: 630rpx;
		margin-left: 30rpx;
		height: 46rpx;
		margin-top: 27rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.wxpay1{
		width: 46rpx;
		height: 46rpx;
	}
	.pay-title{
		width: 200rpx;
		margin-left: 8rpx;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.pay-shuo{
		width: 340rpx;
		text-align: right;
		margin-right: 10rpx
	}
	.wxpay2{
		width: 36rpx;
		height: 36rpx;
	}
	.footer{
		width: 690rpx;
		height: 140rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		background-color: white;
		display: flex;
		align-items: center;
	}
	.bottom-center{
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
	}
	.bottom-left{
		width: 372rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
		line-height: 24rpx;
	}
	.bottom-right{
		display: inline-block;
		width:400rpx;
		height: 24rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #CCCCCC;
	}
	.Btn{
		width: 750rpx;
		height: 116rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	.Btntitle{
		font-size: 24rpx;
		color: #192524;
		width: 72rpx;
		height: 36rpx;
		line-height: 36rpx;
		margin-left: 30rpx;
	}
	.Btntitle1{
		font-size: 48rpx;
		color:#FF4D00;
		width: 328rpx;
		height: 36rpx;
		line-height: 36rpx;
		/* margin-left: 30rpx; */
	}
	.Btntitle2{
		font-size: 28rpx;
		color:white;
		width: 290rpx;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		background-color: #F16325;
		border-radius: 44rpx;
		/* margin-left: 30rpx; */
	}
	.botmodal{
		width: 100%;
		height: 100%;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group%203482%402x.png') center/cover;
	}
	.modaltitle{
		font-size: 36rpx;
		color: #710D0D;
		font-weight: bold;
		margin-top: 90rpx;
		margin-left: 30rpx;
	}
	.boxmoadl{
		width: 690rpx;
		height: 174rpx;
		margin-top: 48rpx;
		margin-left: 30rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Rectangle%20948%402x.png') center/cover;
	}
	.boxtitle{
		width: 224rpx;
		height: 37rpx;
		margin-top: 26rpx;
		margin-left: 82rpx;
		font-size: 32rpx;
		color: #2C2C2C;
		font-weight: bold;
		position: relative;
	}
	.boxtitle::before{
		content: '';
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: -2rpx;
		left: -58rpx;
		border-radius: 50%;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group%203477%402x.png') center/cover;
	}
	.boxconter{
		width: 576rpx;
		height: 72rpx;
		margin-top: 20rpx;
		margin-left: 82rpx;
		font-size: 24rpx;
		color: #3D3F41;
	}
	.Quanpp{
		width: 100%;
		min-height:700rpx;
		background-color: #F3F3F3;
	}
	.Quantitle{
		width: 100%;
		height: 28rpx;
		font-size: 32rpx;
		color: #101010;
		font-weight: bold;
		margin-top: 47rpx;
		text-align: center;
		line-height: 28rpx;
	}
	.Quantitle1{
		min-width: 410rpx;
		height: 22rpx;
		margin-top: 38rpx;
		margin-left: 30rpx;
		font-size: 24rpx;
		color: #3D3D3D;
	}
	.GoPayQuan{
		width: 100%;height: 136rpx;
		position: fixed;
		bottom: 0;
		background-color: white;
		z-index: 999;
	}
	.GoPayQuanadd{
		width: 100%;height: 136rpx;
	}
	.GoPayQuan1{
		width: 690rpx;
		height: 88rpx;
		margin-left: 30rpx;
		margin-top: 24rpx;
		border-radius: 44rpx;
		background-color: #36BE6A;
		color: white;
		font-size: 32rpx;
		line-height: 88rpx;
		text-align: center;
	}
	.main {
		width: 694rpx;
		height: 194rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Subtract.png') center/cover;
		margin-left: 28rpx;
		margin-top: 30rpx;
		border-radius: 16rpx;
		position: relative;
	}
	
	.main-left {
		position: relative;
		width: 190rpx;
		height: 194rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Group%202759.png') center/cover;
		background-color: #36BE6A;
		border-radius: 16rpx;
	}
	
	.qiu1 {
		width: 24rpx;
		height: 24rpx;
		background-color: #efefef;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		left: 180rpx;
		z-index: 10;
	}
	
	.qiu2 {
		width: 24rpx;
		height: 24rpx;
		background-color: #efefef;
		border-radius: 50%;
		position: absolute;
		bottom: -10rpx;
		left: 180rpx;
		z-index: 10;
	}
	
	.tx {
		width: 100%;
		height: 56rpx;
		position: absolute;
		top: 48rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 72rpx;
		color: white;
	}
	
	.tx1 {
		width: 100%;
		height: 18rpx;
		position: absolute;
		bottom: 48rpx;
		text-align: center;
		line-height: 18rpx;
		font-size: 20rpx;
		color: white;
	}
	
	.main-title {
		width: 160rpx;
		height: 32rpx;
		position: absolute;
		top: 28rpx;
		left: 214rpx;
		font-size: 32rpx;
		color: rgba(54, 57, 65, 1);
		font-weight: bold;
	}
	
	.main-time {
		width: 222rpx;
		height: 20rpx;
		position: absolute;
		top: 86rpx;
		left: 214rpx;
		font-size: 24rpx;
		color: rgba(122, 122, 122, 1);
	}
	
	.main-bottom {
		width: 96rpx;
		height: 22rpx;
		position: absolute;
		left: 214rpx;
		bottom: 30rpx;
		font-size: 24rpx;
		color: rgba(161, 161, 161, 1);
	}
	
	.main-img {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		bottom: 25rpx;
		left: 320rpx;
	}
	
	.main-btn {
		
		position: absolute;
		top: 68rpx;
		right: 40rpx;
	}
</style>